<template>
  <div class="log">
    <el-row class="log-title pl-15">
      <span>{{ title }}</span>
    </el-row>
    <el-row class="log-table">
      <el-table border :data="logData">
        <template v-for="item in logColumn">
          <el-table-column :key="item.prop"
                           :align="item.align"
                           sortable
                           :prop="item.prop"
                           :label="item.label">
          </el-table-column>
        </template>
      </el-table>
    </el-row>
    <el-row class="log-table-pagination">
      <el-pagination
        @current-change="onCurrentChange"
        :page-sizes="[10, 20, 30, 40]"
        @size-change="handleSizeChange"
        layout="prev, sizes, pager, next, jumper"
        :page-size="pageObj.pageSize"
        :total="pageObj.total">
      </el-pagination>
    </el-row>
    <app-foot></app-foot>
  </div>
</template>

<script>
import api from '../api';
import AppFoot from '../components/app-foot';

export default {
  name: 'log-info',
  components: {AppFoot},
  data() {
    return {
      title: '日志信息',
      pageObj: {
        page: 1,
        pageSize: 8,
        total: 0
      },
      logColumn: [{
        prop: 'operator',
        align: 'center',
        label: '操作人'
      }, {
        prop: 'opera_module',
        align: 'center',
        label: '操作模块'
      }, {
        prop: 'opera_log',
        align: 'center',
        label: '操作日志'
      }, {
        prop: 'opera_date',
        align: 'center',
        label: '操作日期'
      }],
      logData: []
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      api.findLogs(this.pageObj).then((logs) => {
        this.logData = logs.data;
        this.pageObj.total = logs.total;
      });
    },
    onCurrentChange(page) {
      this.pageObj.page = page;
      this.init();
    },
    handleSizeChange(size) {
      this.pageObj.pageSize = size;
      this.init();
    }
  }
};
</script>

<style scoped lang="scss">
  .pl-15 {
    padding-left: 15px;
  }
  .log {
    height: 100%;
    &-title {
      height: 40px;
      margin: 0 auto;
      width: 98%;
      line-height: 40px;
    }
    &-table {
      margin: 0 auto;
      margin-top: 15px;
      width: 96%;
      max-height: 55%;
      overflow: auto;
      /*min-height: 60%;*/
      &-pagination {
        margin: 0 auto;
        margin-top: 15px;
        width: 96%;
      }
    }
  }
</style>
